<template>
	<!--首页图片 -->
	<view class="indexContainer">
		<!-- 点数头部 -->
		<view class="pointHead flex-start-center">
			<view class="month">
				<picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate" :end="endDate"
					@change="bindDateChange">
					<view class="flex-align-center-justify-start  color6">
						{{ yeartime }}
						<text>-</text>
						{{ monthtime }}
						<uni-icons type="right" color='#333' size="30"></uni-icons>
						<!-- <image class="arrowImg" src="../../static/124.png" mode=""></image> -->

					</view>

				</picker>
			</view>
			<!-- 订单状态 -->
			<view class="selectTime flex-align-center">

				<view class="tab" v-for="(item, index) in orderStatusArr" :key="index">
					<view :class="[currentIndex == index ? 'active' : '']" @click="switchTimeTab(index)">
						{{ item.value }}</view>
				</view>
			</view>



		</view>
		<!-- 充值点数 -->
        <mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
        	@up="upCallback" :up="upOption" :down="downOption">
		<view class="pointList flex-between" v-for="(item,index) in list" :key="index">
			<view>
				<view class="pointName">
					{{item.usuTo}}
				</view>
				<view class="pointTime">
					{{item.createTime}}
				</view>
			</view>
			<!-- types ==1 充值 -->
			<view v-if="types==1" class="pointBlue">
				+{{item.money}}点
			</view>
			<!-- type ==2  支出-->
			<view v-else class="pointRed">
				-{{item.money}}点
			</view>
		</view>
		</mescroll-body>

	</view>

</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				date: null,
				list:[],
				windowHeight:'',
				currentIndex: '0',
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],

				orderStatusArr: [{
						value: '充值'
					},
					{
						value: '消费'
					},

				],
				
				downOption: {
					auto: false
				},
				// 上拉配置项
				upOption: {
					auto: false
				},
				// 1 充值记录 2 使用记录
				types:1,
				// 商家id
				merchantId: uni.getStorageSync('merchantId'),
				currentTime: '2',
				createTime: `${currentDate.split('-')[0]}-${currentDate.split('-')[1]}`
			}
		},
		onShow() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},
		
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 600;
				}
			});
				this.init()
		
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			}


			// 时间格式化
			// formattedDate () {
			//   return (params) => {
			//     const currentDate = moment(params);
			//     const formattedDate = currentDate.format('YYYY-MM-DD HH:mm');
			//     return formattedDate;
			//   };
			// },

		},
		methods: {
			// 初始化商家列表
			async upCallback(scroll) {
			
			
			
				const result = await this.$http.post({
					url: this.$api.pageRechargeRecordPageId,
					data: {
						id: this.merchantId,
						// 1 是充值记录 2 是使用记录
						types: this.types,
						yearsMonth:this.createTime,
						page:1,
						limit:10
					
					
					}
				});
				if (result.code == 2000) {
			
					console.log('result.data', result.data);
					// this.mescroll.endByPage(result.data.list.length, 1);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					// this.mescroll.endByPage(result.data.list.length, 12);
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
			
				}
			},
			
			
			
			
			async init() {
                console.log(this.createTime)
				
			},
			
			
			bindDateChange(e){
				
				
				this.createTime= e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];
				
				// this.form.startPayTime = `${this.yeartime}-${this.monthtime}-${this.daytime}`
				this.mescroll.resetUpScroll();
				
			},
			switchTimeTab(index) {
                 
				this.currentIndex = index;
				this.types= index+1
				this.$nextTick(() => {
					this.mescroll.resetUpScroll();
				});

			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

		}
	}
</script>

<style lang="less" scoped>
	page {
		background-color: #f1f1f1;
	}

	.arrowImg {
		width: 32rpx;
		height: 32rpx;

	}

	.indexContainer {
		padding: 20rpx;

		.pointHead {
			.month {
				width: 85px;
				height: 28px;
				border-radius: 200rpx;
				background: #E7E7E7;
				color: #fff;
				text-align: center;
				line-height: 28px;
				color: #333;
			}

			.selectTime {

				.tab {
					margin-left: 20rpx;
					list-style-type: none;
					display: block;
					width: 68px;
					height: 28px;
					line-height: 28px;
					text-align: center;
					border: 1px solid #d9d9d9;
					border-radius: 200rpx;
				}

				.active {
					width: 68px;
					height: 28px;
					border-radius: 200rpx;
					background: #1890ff;
					color: #fff;
					text-align: center;
					line-height: 28px;
				}

				.orderStatus {
					width: 90px;
					height: 34px;
					text-align: center;
					line-height: 34px;
					font-weight: 700;

				}

				.filterDate {
					text-align: center;
					line-height: 34px;
					width: 90px;
					height: 34px;
					font-size: 14px;
					border-radius: 2px 0px 0px 2px;
					border: 1px solid #d9d9d9;
					border-right: none;
				}

				.ele-fluid {
					width: 300px !important;
				}
			}

		}

		.pointList {
			width: 710rpx;
			height: 140rpx;
			background-color: #fff;
			margin-top: 30rpx;
			border-radius: 10rpx;
			padding: 24rpx;

			.pointName {
				color: #000;
				margin-bottom: 22rpx;
				font-family: Roboto;
				font-size: 32rpx;
			}

			.pointTime {
				color: #BEBEBE;


				font-size: 24rpx;
			}

			.pointBlue {
				color: #1890ff;
			}
			.pointRed {
				color: #F00;
			}
		}
	}
</style>